<template>
    <el-container style="height: 100%">
        <el-aside width="auto">
            <header-tag></header-tag>
        </el-aside>
        <el-container>
            <el-header>
                <headers></headers>
            </el-header>
            <el-main>
                <transition name="fade-transform" mode="out-in">
                    <router-view />
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Headers from "../../components/Headers";
    import HeaderTag from "../../components/HeaderTag";

    export default {
        components: {
            Headers,
            HeaderTag
        },
        data() {
            return {}
        }
    };
</script>

<style lang="scss" scoped>
    header,
    main {
        padding: 0;
    }

    section {
        height: 100%;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    html {
        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        -ms-overflow-style: none;
        /*火狐下隐藏滚动条*/
        overflow: -moz-scrollbars-none;
    }
    .fade-transform-leave-active,
    .fade-transform-enter-active {
        transition: all 0.5s;
    }

    .fade-transform-enter {
        opacity: 0;
        transform: translateX(-30px);
    }

    .fade-transform-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }
</style>